<template>
  <el-aside width="200px" class="aside">
    <el-menu :default-active="activeMenu" class="el-menu-vertical">
      <el-menu-item index="1" @click="navigateTo('Welcome')">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="2" @click="navigateTo('CarparkInfo')">
        <i class="el-icon-location"></i>
        <span slot="title">智能停车场管理</span>
      </el-menu-item>
      <el-menu-item index="3" @click="navigateTo('Vehicleinfo')">
        <i class="el-icon-truck"></i>
        <span slot="title">车辆停车管理</span>
      </el-menu-item>
      <el-menu-item index="4" @click="navigateTo('User')">
        <i class="el-icon-user-solid"></i>
        <span slot="title">用户及支付管理</span>
      </el-menu-item>
      <el-menu-item index="5" @click="navigateTo('DeviceInfo')">
        <i class="el-icon-s-tools"></i>
        <span slot="title">设备及引导管理</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: "1",
    }
  },
  methods: {
    navigateTo(routeName) {
      this.$router.push({ name: routeName }).catch(err => {
        if (err.name != 'NavigationDuplicated') {
          throw err;
        }
      }); // 跳转到对应路由
    },
  }
}
</script>

<style>
.aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  position: fixed;
  /* 固定定位 */
  top: 60px;
  /* 距离顶部60像素，考虑header的高度 */
  left: 0;
  /* 紧贴左侧 */
  height: calc(100% - 60px);
  /* 高度占满视口，减去header的高度 */
  overflow-y: auto;
  /* 如果内容过多则允许垂直滚动 */
  z-index: 999;
  /* 确保在main内容之上 */
}
</style>
